<template>
  <div>
    <h1>测试</h1>

    <div class="video-container">
      <video id="video" class="video-player" controls></video>
  </div>

  </div>


</template>

<script src="http://10.140.244.152:10021/rtp/Z79rryESm6tfnUlx/hls.m3u8">
const video = document.getElementById('video');
const videoUrl = 'your_m3u8_url.m3u8';

// 检查浏览器是否支持HLS
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(videoUrl);
  hls.attachMedia(video);

  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    video.play();
  });
}
// Safari等原生支持HLS的浏览器
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = videoUrl;
  video.addEventListener('loadedmetadata', function() {
    video.play();
  });
}
</script>

<style>
.video-container {
  max-width: 800px;
  margin: 20px auto;
}
.video-player {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>

